<template>

  <div class="loginBg imgCol">
     
    <diV>
      <div id="company-info" class="imgCol" style="margin-top:50px">
        <img src="../assets/logo.png" style="height:33px;margin-right:5px" />
        <span>浙江省工业环保设计研究院</span>
      </div>
      <!-- <div id="content"> -->
      <Card id="content" class="boxShadow">
        <div >用户登录</div>
        <Divider  />
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
          <FormItem prop="user">
            <Input
              style="width: 300px"
              type="text"
              v-model="formInline.user"
              placeholder="请输入账号..."
              icon="ios-person-outline"
            />
          </FormItem>
          <br />
          <div style="height:10px"></div>
          <FormItem prop="password">
            <Input
              style="width: 300px"
              type="password"
              v-model="formInline.password"
              placeholder="请输入密码..."
              icon="ios-lock-outline"
            />
          </FormItem>
          <br />
          <div style="height:10px"></div>
          <FormItem prop="identify">
            <Input
              id="ident"
              type="text"
              style="width:190px"
              v-model="formInline.identify"
              placeholder="请输入验证码..."
              icon="ios-key-outline"
            />
          </FormItem>
          <FormItem>
            <identify></identify>
          </FormItem>
          <br />
          <FormItem>
            <Button type="primary" style="width:105px" ghost @click="checkValidate(1)">管理员登录</Button>
          </FormItem>
          <FormItem>
            <Button type="primary" style="width:105px" ghost @click="checkValidate(2)">普通用户登录</Button>
          </FormItem>
        </Form>
        <Modal></Modal>
      </Card>
      <!-- </div> -->
    </diV>
  </div>
</template>
<script>
import Router from "vue-router";
export default {
  data() {
    return {
      formInline: {
        user: "",
        password: "",
        identify: ""
      },
      ruleInline: {
        user: [{ required: true, message: "账号不得为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不得为空", trigger: "blur" }
          // { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
        ],
        identify: [
          { required: true, message: "验证码不得为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    /**验证表单的回调 */
    checkValidate(num) {
      this.$refs.formInline.validate(valid => {
        if (valid === true) {
          this.judge(num);
        }
      });
    },
    judge(num) {
      let identify = sessionStorage.getItem("identify");
      //  console.log('identify:'+identify);
      let input = this.formInline.identify;
     // console.log("input:" + input);
      if (identify === input) {
        this.submit(num);
      } else {
        this.$Message.error("验证码输入错误！");
      }
    },
    submit(num) {
      //    console.log("登录号：",num)
      let B = true;
      // let path="/epi/admin/department";
      let path = "";
      let name = "";
      if (num === 1) {
        B = true;
        path = "/admin.html#/epi/admin/department";
        name = "admin";
      } else {
        B = false;
        path = "/user.html#/epi/user/bidding";
        name = "user";
      }
   //   console.log("登录参数：", num, path, B, this.formInline);
      this.$ajax({
        method: "post",
        url: "http://47.101.180.43:8080/login",
        data: {
          username: this.formInline.user,
          password: this.formInline.password
        },
        params: {
          rememberMe: false,
          isAdmin: B
        }
      })
        .then(response => {
          //   console.log("登录情况",response);
          var code = "";
          code = response.data.code;
          //setCookie()里面有关Path存在一些问题，所以暂时这样写
          var millisecond = new Date().getTime();
          var expiresTime = new Date(millisecond + 60 * 1000 * 600);
          //当用户登录后页面存有其登录的cookie,所以会导致二次登录失败，因此需要考虑||后面的一种情况
          if (code === 0) {
            //  console.log("statu 1");
            sessionStorage.setItem(name, response.data.data);
            //VUE本来就是单页应用，如果要多应用之间跳转 可以用原始方法跳转，而不采用router方法
            window.location.href = path;
            // this.$router.push({path:path});
            //上述语句只能实现转化页面，url换了，但是页面没有刷新，使用下面语句可实现刷新页面
            //  this.$router.go(0);
          } else if (
            code === -1 &&
            response.data.msg === "对不起，您没有权限访问"
          ) {
            //    console.log("statu 2");
            sessionStorage.setItem(name, response.data.data);
            window.location.href = path;
          } else {
            //console.log("statu 3");
            this.$Message.error(response.data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style>
.ivu-divider-horizontal {
    margin:16px 0 16px 0;
}
.loginBg {
  width: 100%;
  height: 100%;
  position: fixed;
  /* background: linear-gradient(
    180deg,
    #dcfaf8 30%,
    transparent 40%,
    #d5efc0 70%
  ); */
  background: linear-gradient(top, #dcfaf8, #d5efc0);
}
.boxShadow{
    box-shadow:0 0 10px #b5b8c0;
}
.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
#title {
  width: 100%;
  height: 100%;
  /*fixed使得该div可以把屏幕铺满*/
  position: fixed;
  background-color: #f8f8f9;
}
#company-info {
  width: 100%;
  color: #333;
  font-size: 30px;
  font-weight: bold;
}
#content {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  margin-top: 20px;
  border: 1px solid #fff;
  /* width:40%; */
  width: 500px;
  height: 360px;
  background-color: #fff;
  /*text-align设置content中的内容的位置*/
  text-align: center;
}
</style>
